<template>
  <div class="products-page">
    <!-- Header -->
    <!-- 
    <header>
      <div class="logo">
        <img src="/images/logo.jpg" alt="FreshMart logo">
      </div>
      <nav>
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/products" class="active">Products</router-link></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><router-link to="/cart">Cart</router-link></li>
        </ul>
      </nav>
    </header> 
    -->

    <!-- Banner -->
    <section class="banner">
      <img src="/images/logo.jpg" alt="FreshMart variety banner">
      <div class="banner-text">
        <h1>All Products</h1>
        <p>Fresh food &amp; daily essentials in one place</p>
      </div>
    </section>

    <main>
      <!-- Product Categories -->
      <section v-for="category in categories" :key="category.name" class="highlights">
        <h2>{{ category.name }}</h2>
        <div class="product-grid">
          <div v-for="product in category.products" :key="product.id" class="product-card">
            <img :src="product.image" :alt="product.name">
            <h3>{{ product.name }}</h3>
            <p>€{{ product.price.toFixed(2) }}&nbsp;/&nbsp;{{ product.unit }}</p>
            <div class="quantity-selector">
              <button class="quantity-btn" @click="decreaseQuantity(product.id)">-</button>
              <input 
                type="number" 
                :value="quantities[product.id] || 1" 
                min="1" 
                readonly
              >
              <button class="quantity-btn" @click="increaseQuantity(product.id)">+</button>
            </div>
            <button @click="addToCart(product)">Add to Cart</button>
          </div>
        </div>
      </section>
    </main>


  </div>
</template>

<script>
export default {
  name: 'Products',
  data() {
    return {
      quantities: {},
      categories: [
        {
          name: 'Fruits',
          products: [
            { id: 'Orange', name: 'Orange', price: 4.99, unit: 'kg', image: '/images/Orange.jpg' },
            { id: 'Grape', name: 'Grape', price: 8.99, unit: 'kg', image: '/images/Grape.jpg' },
            { id: 'Watermelon', name: 'Watermelon', price: 5.99, unit: 'kg', image: '/images/Watermelon.jpg' }
          ]
        },
        {
          name: 'Vegetables',
          products: [
            { id: 'Chinese_Flowering_Cabbage', name: 'Chinese Flowering Cabbage', price: 2.99, unit: 'kg', image: '/images/Chinese flowering cabbage.jpg' },
            { id: 'Chinese_Cabbage', name: 'Chinese Cabbage', price: 3.99, unit: 'piece', image: '/images/Chinese cabbage.jpg' },
            { id: 'Lettuce', name: 'Lettuce', price: 0.99, unit: 'piece', image: '/images/Lettuce.jpg' }
          ]
        },
        {
          name: 'Meat',
          products: [
            { id: 'Pork', name: 'Pork', price: 8.99, unit: 'kg', image: '/images/Pork.jpg' },
            { id: 'Beef', name: 'Beef', price: 10.99, unit: 'kg', image: '/images/Beef.jpg' },
            { id: 'Chicken', name: 'Chicken', price: 8.99, unit: 'kg', image: '/images/Chicken.jpg' }
          ]
        },
        {
          name: 'Daily Necessities',
          products: [
            { id: 'Laundry_Detergent', name: 'Laundry Detergent', price: 8.99, unit: 'piece', image: '/images/Laundry Detergent.jpg' },
            { id: 'Tissue', name: 'Tissue', price: 2.99, unit: 'piece', image: '/images/Tissue.jpg' },
            { id: 'Shower_Gel', name: 'Shower Gel', price: 4.99, unit: 'piece', image: '/images/Shower gel.jpg' },
            { id: 'Shampoo', name: 'Shampoo', price: 4.99, unit: 'piece', image: '/images/Shampoo.jpg' }
          ]
        }
      ]
    }
  },
  methods: {
    decreaseQuantity(productId) {
      if (!this.quantities[productId]) {
        this.quantities[productId] = 1;
      }
      if (this.quantities[productId] > 1) {
        this.quantities[productId]--;
      }
    },
    increaseQuantity(productId) {
      if (!this.quantities[productId]) {
        this.quantities[productId] = 1;
      }
      this.quantities[productId]++;
    },
    addToCart(product) {
      const quantity = this.quantities[product.id] || 1;
      const cartItem = {
        id: product.id,
        name: product.name,
        price: product.price,
        quantity: quantity,
        total: product.price * quantity
      };
      
      this.saveToLocalStorage(cartItem);
      alert(`${product.name} added to cart!`);
    },
    saveToLocalStorage(cartItem) {
      let cart = JSON.parse(localStorage.getItem('cart')) || [];
      const existingItem = cart.find(item => item.id === cartItem.id);
      
      if (existingItem) {
        existingItem.quantity += cartItem.quantity;
        existingItem.total = existingItem.price * existingItem.quantity;
      } else {
        cart.push(cartItem);
      }
      
      localStorage.setItem('cart', JSON.stringify(cart));
    }
  },
  mounted() {
    // Initialize quantities for all products
    this.categories.forEach(category => {
      category.products.forEach(product => {
        if (!this.quantities[product.id]) {
          this.quantities[product.id] = 1;
        }
      });
    });
  }
}
</script>

<style scoped>
@import '../assets/style.css';

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #333;
  background: #333;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-btn:hover {
  background: #555;
  border-color: #555;
}

.quantity-selector input {
  width: 50px;
  text-align: center;
  border: 1px solid #ddd;
  height: 28px;
  margin: 0 2px;
}

/* Add to Cart 按钮 */
.product-card button {
  background-color: #333 !important;
  color: white !important;
}

.product-card button:hover {
  background-color: #555 !important;
}
</style>